<template>
  <el-drawer v-model="drawerVisible" :append-to-body="true" :destroy-on-close="true" size="1000px" :title="drawerProps.title">
    <div class="client-materials-add">
      <el-form ref="ruleFormRef" label-position="top" require-asterisk-position="right" class="form-detail">
        <div class="materials-card" v-for="(applicant, index) in formParams.applicantList" :key="index">
          <div class="p-title mb-12">申请人信息</div>
          <div class="form-inline-wrap">
            <el-form-item label="申请人类型">
              <div>企业</div>
            </el-form-item>
            <el-form-item label="申请人名称">
              <div>吉安市清藤有限公司</div>
            </el-form-item>
            <el-form-item label="统一社会信用代码" v-if="applicant.applicationType == 1">
              <div>181104116027376384</div>
            </el-form-item>
            <el-form-item label="身份证号码" v-if="applicant.applicationType == 2">
              <div>181104116027376384</div>
            </el-form-item>
            <el-form-item label="详细地址">
              <div>贵州省黔南布依族苗族自治州长顺县鼓扬镇895号306室</div>
            </el-form-item>
            <el-form-item label="邮政编码">
              <div>377155</div>
            </el-form-item>
            <el-form-item label="营业执照" v-if="applicant.applicationType == 1">
              <file-image :url="applicant.url"></file-image>
            </el-form-item>
            <el-form-item label="主体证明识别（通常为身份证正反面照）" v-if="applicant.applicationType == 2">
              <div class="flx">
                <div class="upload-list">
                  <div class="text-grey">身份证正面(人像)</div>
                  <file-image :url="applicant.url"></file-image>
                </div>
                <div class="upload-list ml-12">
                  <div class="text-grey">身份证反面(国徽)</div>
                  <file-image :url="applicant.url"></file-image>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>

        <!-- 商标信息 -->
        <div class="materials-card">
          <div class="p-title mb-12">商标信息</div>
          <div class="flx-top-between">
            <div class="info-item">
              <el-form-item label="商标类型" class="w-100">
                <div>文字</div>
              </el-form-item>
              <el-form-item label="商标名称" class="w-100" prop="brandName">
                <div>中科同志</div>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否彩色">
                    <div>否</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否肖像">
                    <div>是</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="info-item">
              <el-form-item label="商标图样" class="w-100">
                <div class="align-center text-grey mr-12" v-if="formParams.color">
                  <file-image :url="formParams.url"></file-image>
                  <span>彩色图样</span>
                </div>
                <div class="align-center text-grey">
                  <file-image :url="formParams.url"></file-image>
                  <span v-if="formParams.color">黑白图样</span>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="flx-align-end">
            <el-form-item label="商标说明" prop="description" class="mr-20">
              <div>中科同志商标，文字类型</div>
            </el-form-item>
            <el-form-item label="文书">
              <file-text url="" name="element-plus-logo2.PDF"></file-text>
            </el-form-item>
          </div>
        </div>

        <!-- 附件信息 -->
        <attachment-info :isView="true"></attachment-info>

        <!-- 商标分类 -->
        <div class="materials-card">
          <div class="p-title mb-12">商标分类</div>
          <el-form-item label="商标类别" class="w-100">
            <div class="trademark-category">
              <div class="category-title">01化学原料(5个)</div>
              <div class="sub-list flx">
                <div class="count">0101(5个)</div>
                <div class="tag-list flx-1">
                  <el-tag type="primary" v-for="item in 10" :key="item">010039碱土金属</el-tag>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>

        <!-- 材料信息 -->
        <div class="materials-card">
          <div class="p-title mb-12">材料信息</div>
          <el-form class="form-inline-wrap mt-12" label-position="top" require-asterisk-position="right">
            <div class="form-wrap flx-justify-around w-100">
              <el-form-item label="主体证明（须盖章）">
                <file-text url="" name="element-plus-logo2.PDF"></file-text>
              </el-form-item>
              <el-form-item label="注册委托书">
                <file-text url="" name="element-plus-logo2.PDF"></file-text>
              </el-form-item>
              <el-form-item label="肖像使用证明">
                <file-text url="" name="element-plus-logo2.PDF"></file-text>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 联系人信息（默认） -->
        <div class="materials-card">
          <div class="p-title mb-12">联系人信息（默认）</div>
          <div class="form-inline-wrap">
            <el-form-item label="代理机构名称">
              <div>天津市缘昌有限公司</div>
            </el-form-item>
            <el-form-item label="代理人名称">
              <div>顾昊显</div>
            </el-form-item>
            <el-form-item label="联系人名称">
              <div>侯梦梦</div>
            </el-form-item>
            <el-form-item label="联系人电话">
              <div>13244449999</div>
            </el-form-item>
            <el-form-item label="联系人邮箱">
              <div>aqclmta@enet.com.cn</div>
            </el-form-item>
            <el-form-item label="邮政编码">
              <div>277001</div>
            </el-form-item>
            <el-form-item label="联系人地址">
              <div>天津市市辖区东丽区综合保税区399号300室</div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import AttachmentInfo from "./components/AttachmentInfo.vue";
import FileImage from "@/components/ZcFile/image.vue";
import FileText from "@/components/ZcFile/fileText.vue";

const drawerVisible = ref(false);
const formParams = ref({
  // 申请人信息
  applicantList: [
    {
      // 申请人类型 1 企业 2个人
      applicationType: 1,
      username: "",
      creditCode: "",
      iDNumber: "",
      detailedAddress: "",
      postalCode: "",
      businessLicense: ""
    }
  ],

  // trademarkType  1 文字 2 图形 3文字+图形
  trademarkType: 1,

  // 是否彩色
  color: false,

  // 是否显示肖像
  portrait: true
});
const drawerProps = ref({
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = params => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
.client-materials-add {
  .materials-card {
    background: #f5f7fa;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;

    .info-item {
      width: calc(50% - 10px);
    }

    .align-center {
      text-align: center;
    }
  }
  .form-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .el-form-item {
    width: calc(50% - 10px);
  }

  .trademark-category {
    font-size: 12px;
    color: #606266;
  }

  .tag-list {
    .el-tag {
      margin-left: 8px;
    }
  }
}
</style>
